<template>
  <view class="layout">
    <!-- 导航栏 -->
    <view class="navbar">
      <view
        class="statusBar"
        :style="{
          height: getStatusBarHeight() + 'px',
        }"
      ></view>
      <view
        class="titleBar"
        :style="{
          height: getTitleBarHeight() + 'px',
        }"
      >
        <view class="title">{{ title }}</view>
        <navigator url="/pages/search/search">
          <view class="search">
            <uni-icons class="icon" type="search" color="#888" size="18" />
            <text class="text">搜索</text>
          </view>
        </navigator>
      </view>
    </view>
    <!-- 占位 -->
    <view
      class="fill"
      :style="{
        height: getNavBarHeight() + 'px',
      }"
    ></view>
  </view>
</template>

<script setup>
import {
  getTitleBarHeight,
  getNavBarHeight,
  getStatusBarHeight,
} from "@/utils/system.js";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff 400rpx),
      linear-gradient(to right, #beecd8 20%, #f4e2d8);

    .statusBar {
    }
    .titleBar {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      .title {
        font-size: 22px;
        font-weight: 700;
        color: $text-color-1;
      }
      .search {
        width: 220rpx;
        height: 50rpx;
        border-radius: 60rpx;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid #fff;
        margin-left: 30rpx;
        color: #999;
        font-size: 28rpx;
        display: flex;
        align-items: center;

        .icon {
          margin-left: 15rpx;
        }

        .text {
          padding-left: 10rpx;
        }
      }
    }
  }
  .fill {
  }
}
</style>
